<template>
    <div id="myAddress">
        <!--导航栏-->
        <van-nav-bar
                title="收货地址"
                left-arrow
                :fixed=true
                :border=true
                @click-left="onClickLeft"
        ></van-nav-bar>
        <!--地址列表-->
        <van-address-list
            v-model="chosenAddressId"
            :list="list"
            default-tag-text="默认"
            @add="onAdd"
            @edit="onEdit"
            @select="onBackAddress"
            style="margin-top: 3rem"
        ></van-address-list>

        <transition name="router-slier" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    import {Toast} from 'vant'
    import { getUserAddress } from './../../../service/api/index'
    import { mapState } from 'vuex'
    import PubSub from 'pubsub-js'
    export default {
        name: "MyAddress",
        data() {
            return {
                chosenAddressId: '1',
                list: [
                    // {
                    //     id: '1',
                    //     name: '张三',
                    //     tel: '13000000000',
                    //     address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
                    // },
                    // {
                    //     id: '2',
                    //     name: '李四',
                    //     tel: '1310000000',
                    //     address: '浙江省杭州市拱墅区莫干山路 50 号'
                    // }
                ],
            }
        },
        computed:{
            ...mapState(['userInfo'])
        },
        mounted(){
            this.initUserAddress()
            //订阅添加地址成功
            PubSub.subscribe('backToMyAddress',(msg)=>{
                if(msg === 'backToMyAddress') {
                    this.initUserAddress()
                }
            })
        },
        methods:{
            onClickLeft(){
                // alert('返回')
                this.$router.go(-1)
            },
            //新增地址
            onAdd() {
                this.$router.push({name:'addAddress'})
            },
            onEdit(item, index) {
                console.log(item)
                this.$router.push({
                    path:'/confirmOrder/myAddress/editAddress?address_id='+item.address_id
                })
                // Toast('编辑地址:' + index);
            },

            //获取当前用户的地址
            async initUserAddress(){
                if(this.userInfo.token){ //处于登录状态
                    let result = await getUserAddress(this.userInfo.token)
                    if(result.success_code === 200) {
                        let addressArr = result.data;
                        this.list = []
                        addressArr.forEach((address,index)=>{
                            let addressobj = {
                                id: String(index + 1),
                                name: address.address_name,
                                tel: address.address_phone,
                                address: address.address_area+address.address_area_detail,
                                address_id:address._id,
                                user_id:address.user_id
                            };
                            //追加到数组
                            this.list.push(addressobj)
                        })
                    } else {
                        Toast({
                            message:'获取地址失败',
                            duration:500
                        })
                    }

                } else {
                    Toast({
                        message:'登录已经过期，请重新登录',
                        duration:500
                    })
                }
            },

            //返回选中的地址
            onBackAddress(item){
                if(item){
                    //发布地址数据
                    PubSub.publish('userAddress',item)
                    //返回上一级界面
                    this.$router.back()
                }
            }
        },
        beforeDestroy() {
            PubSub.unsubscribe('backToMyAddress');
        }
    }
</script>

<style scoped>
    #myAddress {
        position:absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #F5F5F5;
        z-index: 200;
    }

    .router-slier-enter-active, .router-slier-leave-active{
        transition: all 0.3s;
    }

    .router-slier-enter, .router-slier-leave{
        transform: translate3d(2rem,0,0);
        opacity: 0;
    }
</style>